<template>
  <!-- <div class="p10"> -->
  <div class="flexContent">
    <div class="top">
      <div class="basic">基础信息</div>
      <div class="topBox">
        <p class="topBox1">盘点名称：{{ name }}</p>
        <p class="topBox1">仓库名称：{{ warehouseName }}</p>
        <p class="topBox1">盘点人员：{{ userName }}</p>
        <p class="topBox2">备注：{{ remark }}</p>
      </div>
    </div>
    <div class="center">
      <!-- <h3 class="m0 pt10 pb10 mb10">盘点明细</h3> -->
      <div class="basic">盘点明细</div>
      <el-button class="btnOk" @click="" v-if="false">导出</el-button>
      <el-form ref="formData" :model="formData" @submit.native.prevent>
        <el-table border class="tablebox" :data="formData.tableData" max-height="410" size="medium" style="width: 100%">
          <el-table-column align="center" type="index" label="序号" width="80" />
          <el-table-column align="center" prop="name" label="商品名称" width="200" />
          <el-table-column align="center" prop="standard" label="规格" />
          <el-table-column align="center" prop="unit" label="单位" />
          <el-table-column align="center" prop="bigPacking" label="大包装" />
          <el-table-column align="center" prop="category" label="商品类型" />
          <el-table-column align="center" prop="region" label="商品区域" />
          <el-table-column align="center" prop="aisle" label="通道名称" />
          <el-table-column align="center" prop="position" label="仓位名称" />
          <el-table-column align="center" prop="inventoryNum" label="库存数量" />
          <el-table-column align="center" prop="stocktakingNum" label="盘点数量" min-width="120">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.stocktakingNum'" :rules="tableRules.stocktakingNum"
                v-if="isDetail">
                <el-input v-clearEmoji v-model.number="scope.row.stocktakingNum" require placeholder="请输入数量"
                  class="group-inp" size="small" @blur="changeAll(scope.$index)" />
              </el-form-item>
              <span v-else>{{ scope.row.stocktakingNum }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="盘点状态" width="90">
            <template slot-scope="{row}">
              <el-tag type="primary" size="small" v-if="row.status == '0'">无盈亏</el-tag>
              <el-tag type="danger" size="small" v-if="row.status == '2'">盘亏</el-tag>
              <el-tag type="success" size="small" v-if="row.status == '1'">盘盈</el-tag>

            </template>
          </el-table-column>
          <el-table-column align="center" label="备注">
            <template slot-scope="scope">
              <el-form-item v-if="isDetail">
                <el-input v-clearEmoji v-model.trim="scope.row.remark" placeholder="请输入备注" class="group-inp" size="small" />
              </el-form-item>
              <span v-else>{{ scope.row.remark }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-row :gutter="20" class="txtInfo">
          <el-col :span="8" :offset="0">
            盘盈数量：<span style="color: #f59a23;margin-right: 20px;">{{ addNum }}</span>
            盘亏数量：<span style="color: #f59a23;">{{ delNum }}</span>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btm" style="display: flex;justify-content: end;">
      <el-button v-if="isDetail" class="addBtn" style="width: 88px;" @click="submitData('formData')">确定</el-button>
      <el-button @click="cancle" class="celBtn" style="width: 88px;">取消</el-button>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import { reqCheckInfoDetail, reqUpdateCheckInfo } from "@/api/storage"
export default {
  name: "ToChecked",
  data() {
    return {
      id: "",
      name: "",
      warehouseName: "",
      userName: "",
      remark: "",
      formData: {
        tableData: [],
      },
      tableRules: {
        stocktakingNum: [{ required: true, message: "盘点数量不能为空", trigger: 'blur' }, { pattern: /^\+?[0-9]\d*$/, message: '盘点数量必须为整数', trigger: 'blur' }],
      },

      // 盘盈数量
      addNum: 0,
      // 盘亏数量
      delNum: 0,
    }
  },
  computed: {
    isDetail() {
      return this.$route.query.isDetail === "0"
    }
  },
  activated() {
    console.log(this.$route.query.id, this.id);
    if (this.$route.query.id !== this.id) {
      this.id = this.$route.query.id;
      this.getCheckInfoDetail(this.$route.query.id)
    }
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getCheckInfoDetail(this.$route.query.id)
    }
  },
  methods: {
    async getCheckInfoDetail(id) {
      let res = await reqCheckInfoDetail({ id });
      if (res.code === 200) {
        this.name = res.data.name;
        this.warehouseName = res.data.warehouseName;
        this.userName = res.data.userName;
        this.remark = res.data.remark;
        this.addNum = res.data.inventorySurplus;
        this.delNum = res.data.inventoryLoss;
        if (this.isDetail) {
          res.data.detailsList.forEach(item => {
            item.stocktakingNum = ""
          });
        }
        this.formData.tableData = res.data.detailsList;
      }
    },
    changeAll(index) {
      this.addNum = 0;
      this.delNum = 0;
      const stocktakingNum = this.formData.tableData[index].stocktakingNum
      const inventoryNum = this.formData.tableData[index].inventoryNum
      if (+stocktakingNum === +inventoryNum) {
        this.formData.tableData[index].status = "0";
      } else if (+stocktakingNum > +inventoryNum) {
        this.formData.tableData[index].status = "1"
      } else {
        this.formData.tableData[index].status = "2"
      }
      // 计算盈利合计
      this.formData.tableData.forEach(item => {
        if (item.status === "1") {
          this.addNum += item.stocktakingNum - item.inventoryNum;
        } else if (item.status === "2") {
          this.delNum += item.inventoryNum - item.stocktakingNum;
        }
      })
    },
    cancle() {
      this.closeTag();
    },
    submitData(formName) {
      this.$refs[formName].validate(async (valid1) => {
        if (valid1) {
          if (this.formData.tableData.length === 0) {
            this.$message.warning("请添加盘点商品");
            return;
          }
          let detailsList = this.formData.tableData.map(item => ({
            id: item.id,
            stocktakingNum: item.stocktakingNum,
            inventoryNum: item.inventoryNum,
            remark: item.remark,
          }))
          const reqObj = { detailsList }
          let res = await reqUpdateCheckInfo({ ...reqObj, id: this.id })

          if (res.code === 200) {
            this.$message.success('盘点成功')
            this.closeTag()
          } else {
          }
        } else {
          this.$message.warning('请输入合法的数据')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.flexContent {
  height: 100%;
  // padding:;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .txtInfo {
    padding-top: 10px;
  }

  .top {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
  }

  .basic {
    font-family: PingFang SC, PingFang SC;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 32px;
    // height: 38px;
  }

  .topBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .topBox1 {
      width: 33%;
      margin-bottom: 10px;

    }

    .topBox2 {
      width: 98%;
      word-wrap: break-word;
    }
  }
}
</style>